---
id: hover-card
title: Hover Card
description: A card that appears when a user hovers over an element.
---

<ComponentPreview id="HoverCard" />

## Anatomy

To set up the hover card correctly, you'll need to understand its anatomy and how we name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.

<Anatomy id="hover-card" />

## Examples

Learn how to use the `HoverCard` component in your project. Let's take a look at the most basic example:

<Example id="basic" />

### Controlled HoverCard

The controlled `HoverCard` component provides an interface for managing the state of the hover card using the `open` and
`onOpenChange` props:

<Example id="controlled" />

### Custom Positioning

The `HoverCard` component can be customized in its placement and distance from the trigger element through the
`positioning` prop:

<Example id="positioning" />

### Render Prop Usage

The `HoverCard` component can also accept a render prop, giving the user more control over rendering behavior. This is
useful for dynamically updating the trigger based on the state of the `HoverCard`:

<Example id="render-prop" />

### Using the Root Provider

The `RootProvider` component provides a context for the hover-card. It accepts the value of the `useHover-card` hook.
You can leverage it to access the component state and methods from outside the hover-card.

<Example id="root-provider" />

> If you're using the `RootProvider` component, you don't need to use the `Root` component.

## API Reference

### Props

<ComponentTypes id="hover-card" />

### Context

These are the properties available when using `HoverCard.Context`, `useHoverCardContext` hook or `useHoverCard` hook.

<ContextType id="hover-card" />
